<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>菜单--变更父级</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="/components/treetable-lay/assets/layui/css/layui.css">
        <link rel="stylesheet" href="/components/treetable-lay/assets/common.css"/>
        <script src='/components/treetable-lay/assets/layui/layui.js'></script>

        <script src="/manage/js/app.js"></script>
    </head>
    <body>

        <div class="layui-form" lay-filter="layuiadmin-app-form-list" id="layuiadmin-app-form-list"
             style="padding: 20px 30px 0 0;">
            <!-- 确认按钮事件 -->
            <div class="layui-form-item layui-hide">
                <input type="button" lay-submit lay-filter="layuiadmin-app-form-submit" id="layuiadmin-app-form-submit"
                       value="确认添加">
                <input type="button" lay-submit lay-filter="layuiadmin-app-form-edit" id="layuiadmin-app-form-edit"
                       value="确认编辑">
            </div>
        </div>

        <!-- 菜单树，数据表格-->
        <div style="float:left; margin-left: 3%;width: 90%;margin-top: 0.5%;">
            <table id="auth-table" class="layui-table" lay-filter="auth-table"></table>
        </div>

        <script>
            $(function () {

            });


            // 后台返回完整菜单数据
            let res;

            layui.config({
                base: '../components/treetable-lay/module/' //静态资源所在路径
            }).extend({
                treetable: 'treetable-lay/treetable'
            }).use(['form', 'table', 'treetable', 'element', 'tree'], function () {
                // 复选框默认是否选中字段名
                layui.table = $.extend(layui.table, {config: {checkName: 'isChecked'}});

                // 初始化右边 table 数据
                xijiaRenderTable();
                // 监听复选框选中
                xijiaEventCheckbox();
                // 回显
                isCheckedPid(parent.data);
                // 监听确认更新父Id
                xijiaEventUpdPid();
            });


            /**
             *     table数据--（抽离出来方便重载）
             *
             * @date  2019/11/16 0016 16:56
             * @return
             * @param params
             */
            function xijiaRenderTable() {
                // 获得菜单数据
                if (res == null) {
                    res = Ajax.get(parent.menuMenuListUrl);
                }
                // 渲染表格
                layer.load(2);
                layui.treetable.render({
                    toolbar: '#toolbar',
                    id: "te",                   // 定义Id--用于复选框获取数据
                    treeColIndex: 1,            // 菜单列索引 ,加载展开图标
                    treeSpid: 0,                // 顶级父id
                    treeIdName: 'id',           // id 名称
                    treePidName: 'pid',         // fid 名称
                    treeDefaultClose: false,    // 是否默认折叠
                    treeLinkage: true,         // 父级展开时是否自动展开所有子级
                    elem: '#auth-table',        // table 的 div
                    data: res.data,             // 直接加载数据
                    done: function () {
                        layer.closeAll('loading');
                    },
                    cols: [
                        [
                            {type: 'checkbox'},
                            {field: 'name', width: '400', title: '菜单列表'},//edit: 'text',
                            // {
                            //     field: 'icon', title: '图标', width:'300px',templet: function (res) {
                            //         return "<i class='layui-icon " + res.icon + "'></i>";
                            //     }
                            // },
                            //  {field: 'url', title: '路由'}
                        ]
                    ]
                });
            }


            /**
             *     监听复选框选中
             * @date  2019/11/16 0016 19:43
             * @return
             */
            function xijiaEventCheckbox() {

                // obj = 选中行数据
                layui.table.on('checkbox(auth-table)', function (obj) {
                    //console.log(JSON.stringify(obj))
                    if (!obj.checked) {
                        return;
                    }
                    if (obj.type === "all") {
                        // for (let i = 0; i < res.data.length; i++) {
                        //     console.log(res.data[i].name + "---" + res.data[i].isChecked)
                        // }
                        layer.msg("请勿选择全选");
                        //还原数据
                        isCheckedPid(parent.data);
                    } else if (obj.type === "one") {
                        // 递归选中/取消选中
                        isChecked(obj.data);

                    }
                });
            }


            /**
             *   选中节点，删除其他选中节点
             */
            function isChecked(node) {
                for (let i = 0; i < res.data.length; i++) {
                    //取消所有勾选
                    res.data[i].isChecked = false;
                    if (node.id === res.data[i].id) {
                        // 选中节点勾选
                        res.data[i].isChecked = true;
                    }
                }
                WindowPos.onbeforeunload();  // 记录滚动条位置
                xijiaRenderTable();             // 重载数据
                WindowPos.onload();          // 还原滚动条位置
            }


            /**
             *   重置父节点，回显父节点
             */
            function isCheckedPid(node) {
                for (let i = 0; i < res.data.length; i++) {
                    //取消所有勾选
                    res.data[i].isChecked = false;
                    if (node.pid === res.data[i].id) {
                        // 选中节点勾选
                        res.data[i].isChecked = true;
                    }
                }
                WindowPos.onbeforeunload();  // 记录滚动条位置
                xijiaRenderTable();             // 重载数据
                WindowPos.onload();          // 还原滚动条位置
            }

            /**
             *   修改父id (监听提交)
             */
            function xijiaEventUpdPid() {
                //监听提交
                layui.form.on('submit(layuiadmin-app-form-submit)', function () {
                    let pid = null;
                    for (let i = 0; i < res.data.length; i++) {
                        if (res.data[i].isChecked) {
                            // 选中节点勾选
                            pid = res.data[i].id;
                        }
                    }
                    if (pid == null) {
                        layer.msg("没有选择");
                        throw new Error("没有选择")
                    }
                    // 修改
                    let result = Ajax.put(parent.menuUrl + "/" + parent.data.id, {pid: pid});
                    // 关闭弹层
                    let index = parent.layer.getFrameIndex(window.name);
                    parent.layer.close(index);
                    parent.layer.msg(result.msg);
                    // 重载页面 // parent.window.location.reload();
                    WindowPos.onbeforeunload();  // 记录滚动条位置
                    parent.xijiaRenderTable();
                    WindowPos.onload();          // 还原滚动条位置
                });
            }
        </script>
    </body>
</html>